<template>
  <div>
    <el-card class="new-music-box-card" :body-style="{ padding: 0 }">
      <div class="new-music-img" @click="addMusic">
        <el-image style="width: 100%; border-radius: 5px" :src="pic" alt=""></el-image>
        <div class="el-icon-caret-right" style="font-size: 24px; color: #ec4141"></div>
      </div>
      <!-- 独家放送名称 -->
      <div class="new-music-info">
        <p>{{ name }}</p>
        <span>{{ artists }}</span>
      </div>
    </el-card>
  </div>
</template>

<script>
import bus from '@/components/eventBus.js'

export default {
  name: 'SongGroup',
  props: {
    id: {
      type: Number,
      required: true
    },
    name: {
      type: String,
      default: ''
    },
    pic: {
      type: String,
      default: ''
    },
    artistsObj: {
      type: Object,
      default: ''
    }
  },
  data() {
    return {
      artists: ''
    }
  },
  created() {
    this.artistsName()
  },
  methods: {
    artistsName() {
      const {
        artists: {
          0: { name }
        }
      } = this.artistsObj
      this.artists = name
    },
    // 向 PlayBox 传入音乐 id
    addMusic() {
      bus.$emit('songId', this.id)
    }
  }
}
</script>

<style lang="less" scoped>
.new-music-box-card {
  width: 352px;
  height: 47.5px;
  &:hover {
    background-color: #eaeaea;
  }
  .new-music-img {
    float: left;
    position: relative;
    width: 47.5px;
    height: 47.5px;
    cursor: pointer;
    // 中央播放图标样式
    .el-icon-caret-right {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -12px;
      margin-left: -12px;
      width: 24px;
      height: 24px;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 12px;
    }
  }
  .new-music-info {
    margin-left: 55px;
    text-align: left;
    font-size: 13px;
    p {
      padding-top: 3px;
    }
    span {
      display: inline-block;
      margin-top: 7px;
      cursor: pointer;
    }
  }
}
</style>
